<template>
    <view>
        <!-- #ifdef MP -->
        <view class="mix-page-header">
            <view class="content row" :style="{
					paddingRight: headerPaddingRight + 'px',
					paddingTop: statusBarHeight + 'px',
					height: navigationBarHeight + statusBarHeight + 'px'
				}">
                <view class="btn center" @click="togglePicker">
                    <text v-if="showBack" class="mix-icon icon-xiangzuo" @click="navBack"></text>
                    <text class="mix-icon icon-dizhi1"></text>
                    <view>
                        {{ pickerValue ? pickerValue : '切换地区' }}
                    </view>
                    <block v-if="list">
                        <u-select v-model="show" mode="mutil-column-auto" :list="list"
                            @confirm="areaConfirm"></u-select>
                    </block>
                </view>
                <view class="search-wrap center hide" :style="{height: customHeight + 'px'}">
                    <text class="mix-icon icon-sousuo"></text>
                    <u-input v-model="value" placeholder="请输入关键字搜索" @confirm="searchConfirm" />
                </view>
            </view>
            <!-- 占位栏 -->
            <view :style="[{minHeight: navigationBarHeight+statusBarHeight+'px'}]"></view>
        </view>
        <!-- #endif -->
    </view>

</template>

<script>
    import {
        getProvices
    } from '../../extend/request/vmeitime-http/index.js';

    /**
     * 顶部菜单
     * @description 此组件一般用于页面顶部显示。
     * @tutorial https://www.dfer.site
     * @property {String} defaultValue 默认值
     * @property {Boolean} showBack 显示返回键
     * @event {Function} clickHandler 点击组件会触发此事件
     * @example <dfer-header @clickHandler="getList()" :showBack="false" />
     */
    export default {
        name: "dfer-header",
        props: {
            // 是否显示返回按钮
            showBack: {
                type: Boolean,
                default: true
            },
            defaultValue: {
                type: String,
                default: ""
            },
        },
        data() {
            return {
                // 是否显示picker组件
                show: false,
                // picker选择的值
                pickerValue: '',
                // 保存所有的省市区信息
                list: [],
                value: this.defaultValue,
            };
        },
        created() {
            let district_name = this.getStorage('district_name');
            console.log(district_name);
            if (district_name) {
                this.pickerValue = district_name;
            } else {
                this.pickerValue = '夷陵区';
                let data = {
                    province_name: '湖北省',
                    province_id: 24022,
                    city_name: '宜昌市',
                    city_id: 24453,
                    district_name: '夷陵区',
                    district_id: 24481
                };
                this.setStorage(data);
            }
            // 获取省市区分类数据
            this.getProvinces();
        },
        methods: {
            //切换picker组件
            togglePicker() {
                return;
                this.show = !this.show
            },
            navBack() {
                uni.navigateBack();
            },
            // 获取省市区分类信息
            async getProvinces() {
                // 获取并过滤出所有开通过的村部落的省
                let provices = await getProvices();
                provices = provices.map(p => this.formatData(p));
                // 获取每个省市对应的市级信息
                for (let item of provices) {
                    //获取省市的id
                    const {
                        value: id
                    } = item;
                    //发起请求获取市级数据
                    let city = await getProvices(id);
                    city.map(async c => {
                        // 获取区级信息
                        let area = await getProvices(c.id);
                        c = this.formatData(c);
                        area = area.map(are => {
                            are = {
                                value: are.id,
                                label: are.name
                            }
                            c.children.push(are)
                        });
                        item.children.push(c)
                    })
                }
                this.list = provices;
            },
            formatData(v) {
                return {
                    value: v.id,
                    label: v.name,
                    children: v.children ? v.children : []
                }
            },
            /**
             * 切换地区
             * @param {Object} e
             */
            areaConfirm(e) {
                let province_name = e[0].label;
                let province_id = e[0].value;
                let city_name = e[1].label;
                let city_id = e[1].value;
                let district_name = e[2].label;
                let district_id = e[2].value;

                this.pickerValue = district_name;
                let data = {
                    province_name,
                    province_id,
                    city_name,
                    city_id,
                    district_name,
                    district_id
                };
                // 储存用户选择的区级id
                this.setStorage(data);

                this.$emit('clickHandler');
            },
            searchConfirm(e) {
                console.log(e);
                this.toPage('/pages/index/search', {
                    keywords: e
                });
            }
        },
        computed: {
            statusBarHeight() {
                return this.systemInfo.statusBarHeight
            },
            navigationBarHeight() {
                return this.systemInfo.navigationBarHeight;
            },
            customWidth() {
                return this.systemInfo.custom.width;
            },
            customHeight() {
                return this.systemInfo.custom.height;
            },
            //小程序右侧需要留出气泡空间
            headerPaddingRight() {
                // #ifndef MP
                return 0;
                // #endif
                // #ifdef MP
                return this.customWidth + 20;
                // #endif
            },
        },
        watch: {
            defaultValue(n, o) {
                console.log(n, o);
                this.value = n;
            }

        }
    }
</script>

<style lang="scss" scoped>
    .content {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 95;
        width: 100%;
        background-color: #fff;
    }

    .btn {
        height: 40px;
        padding: 5px 12px;
        position: relative;

        .mix-icon {
            font-size: 20px;
            color: #333;
        }
    }

    .search-wrap {
        flex: 1;
        font-size: 14px;
        color: #999;
        border-radius: 100px;
        background-color: #f2f2f2;

        .icon-sousuo {
            margin-right: 6px;
            font-size: 18px;
            color: #999;
        }
    }
</style>